
<style scoped lang="scss"></style>
<script setup>
import FirstTitle from "@comp/FirstTitle";
import { onMounted } from "vue";
import PsbzTable from "@comp/llyy/PsbzTable";
import { postTableData } from "@/api/table";

const city = window.globalObj.name;

const rkqkHeaders = [
  {
    label: "行政区域",
    prop: "jd_name",
    minWidth: "90",
  },
  {
    label: "常住人口（万人）",
    prop: "ofen_people_sum",
    minWidth: "90",
  },
  {
    label: "城区常住人口（万人）",
    prop: "city_people_sum",
    minWidth: "300",
  },
];

const rkqkList = ref([
  {
    data0: "X",
    data1: "X",
    data2: "X",
  },
]);

const ybcsHeaders = [
  {
    label: "行政区划",
    prop: "jd_name",
    minWidth: "90",
  },
  {
    label: "掩蔽场所名称",
    prop: "name",
    minWidth: "90",
  },
  {
    label: "面积",
    prop: "area",
    minWidth: "90",
  },
  {
    label: "掩蔽人员数量(人)",
    prop: "accommodate",
    minWidth: "90",
  },
  {
    label: "类型",
    prop: "type",
    minWidth: "90",
  },
  {
    label: "联系人",
    prop: "rf_contact",
    minWidth: "90",
  },
  {
    label: "联系电话",
    prop: "rf_contact_phone",
    minWidth: "90",
  },
];

const ybcsList = ref([
  {
    data0: "X",
    data1: "X",
    data2: "X",
    data3: "X",
    data4: "X",
    data5: "X",
  },
]);

const rfgcHeaders = [
  {
    label: "行政区划",
    prop: "jd_name",
    minWidth: "90",
  },
  {
    label: "工程名称",
    prop: "name",
    minWidth: "300",
  },
  {
    label: "建设地点",
    prop: "detailed_address",
    minWidth: "300",
  },
  {
    label: "使用面积（平方米）",
    prop: "usable_area",
    minWidth: "90",
  },
  {
    label: "容纳人数",
    prop: "wartime_shelter",
    minWidth: "90",
  },
];

const rfgcList = ref([
  {
    data0: "X",
    data1: "X",
    data2: "X",
    data3: "X",
    data4: "X",
  },
]);

const ssdyHeaders = [
  {
    label: "序号",
    prop: "rowNum",
    minWidth: "90",
  },
  {
    label: "疏散区域",
    children: [
      {
        label: "疏散任务名称",
        prop: "task",
        minWidth: "90",
      },
      {
        label: "行政区划（域）",
        prop: "jd_name",
        minWidth: "90",
      },
      {
        label: "疏散区域",
        prop: "ss_jd",
        minWidth: "90",
      },
      {
        label: "疏散人数",
        prop: "num",
        minWidth: "90",
      },
    ],
  },
  {
    label: "接受区域",
    children: [
      {
        label: "疏散地域名称",
        prop: "area_name",
        minWidth: "90",
      },
      {
        label: "安置街、镇、乡",
        prop: "js_jd",
        minWidth: "90",
      },
    ],
  },
];

const ssdyList = ref([
  {
    data0: "X",
    data1: "X",
    data2: "X",
    data3: "X",
    data4: "X",
    data5: "X",
    data6: "X",
    data7: "X",
  },
]);

// 人口情况统计表（单位
const getTjData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "renkoutongji",
  }).then((res) => {
    if (res.code === 200) {
      rkqkList.value = res?.data || [];
    }
  });
};

// 人口情况统计表（单位
const getYbData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "zhebichangsuofenpei",
  }).then((res) => {
    if (res.code === 200) {
      ybcsList.value = res?.data || [];
    }
  });
};

// 人防工程分配表
const getFpData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "renfanggongchengfenpei",
  }).then((res) => {
    if (res.code === 200) {
      rfgcList.value = res?.data || [];
    }
  });
};

// 疏散地域分配及接收安置计划表
const getAzData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "shusanquyufenpeijieshouanzhijihua",
  }).then((res) => {
    if (res.code === 200) {
      ssdyList.value = res?.data || [];
    }
  });
};

onMounted(async () => {
  await getTjData();
  await getYbData();
  await getFpData();
  await getAzData();
});
</script>
<template>
  <div class="">
    <FirstTitle :name="city + '疏散行动计划图'" />
    <div class="img-box top-15 flex-justify-center-center">
      <img src="@/assets/img/ryfh/ssxd.png" />
    </div>
    <FirstTitle :name="city + '人防警报分布图'" class="top-15" />
    <div class="img-box top-15 flex-justify-center-center">
      <img src="@/assets/img/ryfh/rfjb.png" />
    </div>
    <FirstTitle :name="city + '医疗救护场所分布图'" class="top-15" />
    <div class="img-box top-15 flex-justify-center-center">
      <img src="@/assets/img/ryfh/yljh.png" />
    </div>
    <FirstTitle :name="city + '人口情况统计表（单位:万人）'" class="top-15" />
    <PsbzTable :headers="rkqkHeaders" :tableData="rkqkList" />
    <FirstTitle :name="city + '掩蔽场所分配表'" class="top-15" />
    <PsbzTable :headers="ybcsHeaders" :tableData="ybcsList" />
    <FirstTitle :name="city + '人防工程分配表'" class="top-15" />
    <PsbzTable :headers="rfgcHeaders" :tableData="rfgcList" />
    <FirstTitle :name="city + '疏散地域分配及接收安置计划表'" class="top-15" />
    <PsbzTable :headers="ssdyHeaders" :tableData="ssdyList" />
  </div>
</template>
<style scoped lang="scss"></style>